<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="/files/reset.css" type="text/css" media="screen">
		<link rel="stylesheet" href="/files/web.css" type="text/css" media="screen">
		<link rel="stylesheet" href="/files/web-narrow.css" type="text/css" media="screen and (max-width: 1080px)">
		<link rel="stylesheet" href="/files/web-wide.css" type="text/css" media="screen and (min-width: 1081px)">
		<link rel="icon" href="/files/favicon.ico" type="image/x-icon">
		<script src="/files/jquery.min.js"></script>
		<script src="/files/jquery.ums.js"></script>
		<script src="/files/js.cookie-2.1.0.min.js"></script>
		<!-- New webUI -->
		<script src="/files/util/bootstrap.min.js"></script>
		<script src="/files/util/html5.js"></script>
		<link rel="stylesheet" href="/files/util/bootstrap.min.css" type="text/css" media="screen">
		<!--TV - REMOTE CONTROL-->
		<script src="/files/util/keycode.js"></script>
		<script src="/files/util/keycontroller.js"></script>
		<link rel="stylesheet" href="/files/util/remoteui.css" type="text/css" media="screen">
		<link rel="stylesheet" href="/files/util/fontawesome/css/all.min.css" crossorigin="anonymous">
		<!--VideoJS 7.2.3 Support -->
		<link href="/files/util/video-js/video-js.min.css" rel="stylesheet">
		<script src="/files/util/video-js/video.min.js"></script>
		<title>{{name}}</title>
	</head>
	<body id="ContentPage">
		<nav class="navbar navbar-inverse navbar-fixed-top">
			<div class="container-fluid">
				<div class="navbar-header">
					<a id="HomeButton" class="navbar-brand onFocus" href="javascript:history.back();" title="UMS"></a>
				</div>
			</div>
		</nav>
		<script>
{{#prevId}}
			function prev() {window.location.replace('/play/{{prevId}}?html5=1');}
{{/prevId}}
{{#nextId}}
			function next() {window.location.replace('/play/{{nextId}}?html5=1');}
{{/nextId}}
{{#isVideo}}
			function flash() {window.location.replace('/play/{{id1}}?flash=1');}
{{/isVideo}}
		</script>
		<div id="Container">
			<div id="VideoContainer">
                <!--
<video id="movie" preload autoplay allowfullscreen>
    <source src="http://www.youtube.com/wp-content/uploads/2018/09/Keane_Somewhere_Only_We_Know_Live_Acoustic_Show_London_27_04_2012-1.webm" type="video/webm; codecs=vp8,vorbis" />
    <object width="320" height="240" type="application/x-shockwave-flash"
            data="<?php echo "\"".get_template_directory_uri().'/inc/assets/js/video-js.swf"';?>">
        <param name="movie" value="<?php echo "\"".get_template_directory_uri().'/inc/assets/js/video-js.swf"';?>" />
        <param name="allowfullscreen" value="true" />
        <param name="autoPlay" value="true" />
        <param name="autoBuffering" value="true" />
        <param name="flashvars" value="config={'clip': {'url': 'http://www.youtube.com/wp-content/uploads/2018/09/Keane_Somewhere_Only_We_Know_Live_Acoustic_Show_London_27_04_2012-1.webm'}}" />
    </object>
</video>-->
{{^isVideo}}
				<img height=256 width=256 src="/thumb/{{id1}}" alt=""><br>
				<h2>{{name}}</h2><br>
{{/isVideo}}
				<{{mediaType}} id="player" class="video-js vjs-default-skin" controls {{auto}} fullscreen width="{{width}}" height="{{height}}"
					   data-setup='{ "html5" : { "nativeTextTracks" : true } }'
					   poster="/thumb/{{id1}}" data-setup="{}">

					<source src="/media/{{id1}}" type="{{mime}}">
				{{#sub}}
					<track kind="captions" src="/files/{{this}}" default>
				{{/sub}}
				<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
				</{{mediaType}}>
				<div id="toolbar">
					<button id="prev" onclick="prev()"{{prevAttr}} type="button" class="btn btn-sm btn-playbar"><span class="icon-player-prev"></span></button>
					<button id="play" onclick="play()" type="button" class="btn btn-sm btn-playbar"><span class="icon-player-play"></span></button>
					<button id="pause" onclick="pause()" type="button" class="btn btn-sm btn-playbar"><span class="icon-player-pause"></span></button>
					<button id="next" onclick="next()"{{nextAttr}} type="button" class="btn btn-sm btn-playbar"><span class="icon-player-next"></span></button>
					{{#plsSign}}
					<button id="playlist" title="{{plsAttr}}" onclick="umsAjax('/playlist/{{plsOp}}/{{id1}}', false);return false;" type="button" class="btn btn-sm btn-playbar">{{plsSign}}</button>
					{{/plsSign}}
					{{#isVideo}}
					<button id="flash" onclick="flash()" title="Switch to flash player" type="button" class="btn btn-sm btn-playbar"><span>Flash</span></button>
					{{/isVideo}}
					<button href="/raw/{{id1}}" target="_blank" download="{{name}}" id="DownloadLink" title="Download this {{mediaType}}" class="btn btn-sm btn-playbar"><span class="fa fa-download"></span></button>
					<button id="fullscreen" onclick="GoInFullscreen(videojs('player'));" title="Fullscreen Mode" class="btn btn-sm btn-playbar"><span class="icon-player-size-fullscreen"></span></button>
				</div>
			</div>
		</div>
		<script>
			var state = {};
			var player = document.getElementById('player');

			function status(k, v, wait) {
				//console.log('status '+JSON.stringify(arguments));
				state[k] = v;
				if (! wait) {
					$.post('/playerstatus/', JSON.stringify(state));
				}
			}

			function volumeStatus() {
				status('mute', player.muted ? '1' : '0', true);
				status('volume', (player.volume * 100).toFixed(0));
			}

			player.addEventListener('playing', function(){status('playback', 'PLAYING');});
			player.addEventListener('play', function(){status('playback', 'PLAYING');});
			player.addEventListener('pause', function(){status('playback', 'PAUSED');});
			player.addEventListener('canplay', function(){status('playback', 'STOPPED');});
			player.addEventListener('ended', function(){status('playback', 'STOPPED');});
			player.addEventListener('error', function(){status('playback', 'STOPPED');});
			player.addEventListener('timeupdate', function(){status('position', player.currentTime.toFixed(0));});
			player.addEventListener('volumechange', volumeStatus);
{{#autoContinue}}
			player.addEventListener('ended', next, false);
{{/autoContinue}}
			window.onbeforeunload = function(){status('playback','STOPPED');}
			// Send initial status
			volumeStatus();

{{#push}}
			function control(op, arg) {
				//console.log('control '+JSON.stringify(arguments));
				var player = document.getElementById('player');
				switch (op) {
					case 'play':
						player.play();
						break;
					case 'pause':
						player.pause(!player.paused);
						break;
					case 'stop':
						player.pause();
						break;
					case 'setvolume':
						player.volume = arg/100;
						break;
					case 'mute':
						player.muted = !player.muted;
						break;
				}
			}
{{/push}}			
		</script>
		<input type="hidden" class="jQKeyboard" name="dummy">
		<script defer src="/files/util/fontawesome/js/all.min.js" crossorigin="anonymous"></script>
	</body>
</html>

